<template>
    <div class="xl-form min" style="padding:8px;" v-loading="loading" :style="loading?{height:defH+'px'}:''"
         ref="module-content">
        <div v-for="(res,j) in result" :key="j">
            <div class="xl-field-module" v-for="(rec,i) in res.records" :key="j+''+i" v-if="rec.index<showSize">
                <div class="xl-field-content" v-if="!res.msg">
                    <i class="xl-field-detail" v-if="show" @click="(e)=>{handle(rec,j,res)}">详情</i>
                    <div class="field-item" v-if="isShow(module.component)">
                        <div class="xl-field" >
                            <div class="xl-form-item">
                                <p>
                                    <span class="xl-label" style="text-align: left;">
                                        <span>始发地-目的地</span><i class=colon>:</i>
                                    </span>
                                    <span class="xl-form-content">
                                        <span>{{renderText(module.component,rec)}}</span>
                                    </span>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="field-items" v-for="(field,index) in res.fields" :key="index">
                        <div class="field-item slots" v-if="$scopedSlots.field">
                            <span :key="(j+'_'+index)">
                                 <slot :data="{
                                        item:rec,
                                        fieldIndex:index,
                                        field:field
                                    }" name="field"></slot>
                            </span>
                        </div>
                        <div class="field-item" v-else>
                            <field :item="rec" :field="field" v-if="exclude(field.field)"></field>
                        </div>
                    </div>
                    <div class="xl-field data-source" v-if="res.sourceName">
                        <FormItem label="来源" labelStyle="text-align: left;">
                            <span>{{res.sourceName}}</span>
                        </FormItem>
                    </div>
                </div>
                <div v-else class="xl-field-content">
                    <div class="field-items" style="padding: 12px 16px;width: 100%;">
                        您所查的是“<span class="hl-kw" style=" color: red; ">红名单人员</span>”。
                    </div>
                </div>
            </div>
        </div>
        <div v-if="items.itemTotal>defsize">
            <div class="data-title" v-if="showSize<items.itemTotal">
                <p class="change-show" @click="loadMore()">
                    <span class="word-blue-color">余下</span>
                    <span class="word-red-color">{{surplus}}</span>
                    <span class="word-blue-color">条内容</span>
                    <span class="el-icon-caret-bottom"></span>
                </p>
            </div>
            <div class="data-title" v-else>
                <p class="change-show" @click="up()">
                    <span class="word-blue-color">收起</span>
                </p>
            </div>
        </div>
    </div>
</template>

<script>
import PullLoad from '@/common/template/pull-load'
import FormItem from '@/common/template/xl-form-item'
import field from '@/common/template/field'

export default {
  name: 'template-field',
  components: { field, FormItem, PullLoad },
  data() {
    return {
      size: this.defsize || 2,
      currentSize: this.items.size,
      loading: false,
      full: false,
      show: this.detail,
      module: this.items,
      result: this.items.result
    }
  },
  props: ['items', 'params', 'detail', 'defsize'],
  watch: {
    items: {
      handler(nv, o) {
        if (nv && nv.result && nv.result[0].records) {
          let i = 0;
          nv.result.forEach(r => {
            if (r.records) {
              r.records.forEach(rec => {
                rec.index = i;
                i += 1;
              })
            }
          });
          this.module = nv;
        }
        this.result = nv.result;
      },
      immediate: true,
      deep: true
    }
  },
  computed: {
    showSize() {
      return this.size;
    },
    surplus() {
      return this.module.itemTotal - this.size;
    }
  },
  methods: {
    renderText(component, rec) {
      let str ='';
      switch (component) {
      case 'qshclk':
        str=((rec['CFZM']||rec['FROM_STATION'])||'无')+'-'+((rec['DDZM']||rec['TO_STATION'])||'无');
        break;
      case 'qsmhlk':
        str=(rec['STRT']||'无')+'-'+(rec['DEST']||'无');
        break;
      case 'qsqckyxx':
        str=(rec['STARTSTATION']||'无')+'-'+(rec['ENDSTATION']||'无');
        break;
      }
      return str;
    },
    isShow(component) {
      let c =['qshclk', 'qsmhlk', 'qsqckyxx'];
      if (c.indexOf(component)!==-1) {
        return true;
      }
      return false;
    },
    exclude(f) {
      let exList=['CFZM', 'DDZM', 'FROM_STATION', 'TO_STATION', 'STRT', 'DEST', 'STARTSTATION', 'ENDSTATION'];
      if (exList.indexOf(f)!==-1) {
        return false;
      }
      return true;

    },
    handle(item, index, result) {
      this.$emit('handle', {
        item, index, sourceTable: result.sourceTable
      })
    },
    up() {
      this.size = this.defsize || 2;
    },
    reload() {
      this.size = this.defsize || 2;
      this.module.pageNo = 1;
      this.module.itemTotal = 0;
      this.module.result=null;
      this.full = false;
      this.result = null;
      this.loading = true;

      this.$axiosInstance({
        url: '/searchMore',
        resId: ResIds.resId_searchMore,
        method: 'get',
        params: {
          id: this.module.id,
          pageNo: this.module.pageNo,
          ...this.params
        },
      }).then(result => {
        let { data, code } = result.data;
        if (code === 200) {
          this.currentSize = data[0].size;
          this.module.result = data[0].result;
          this.module.itemTotal = data[0].itemTotal;
        }
        this.loading = false;
      });
    },
    loadMore(call) {
      if (this.full === false) {
        // this.module.size 当前页数量
        if (this.currentSize - this.size > 0) {
          if (this.size + 6 >= this.currentSize) {
            this.size += this.currentSize - this.size;
            console.info('第一页显示完成')
          } else {
            // 默认增加6条记录
            this.size += 6;
          }
        } else {
          this.$axiosInstance({
            url: '/searchMore',
            method: 'get',
            params: {
              id: this.module.id,
              pageNo: this.module.pageNo + 1,
              ...this.params
            },
          }).then(result => {
            let { data, code } = result.data;
            if (code === 200) {
              data[0].result.forEach(d => {
                this.result.push(d);
              });
              this.currentSize = data[0].size;
              this.size += this.currentSize;
              this.module.pageNo += 1;
              if (this.size >= this.module.itemTotal) {
                this.full = true;
              }
            }
            if (call) call();
          });
        }
      } else {
        this.size = this.module.itemTotal;
      }

    },
  },
  mounted() {
    this.$nextTick(() => {
      this.defH = this.$refs['module-content'].clientHeight;
    })
  },
  created() {
  }
}
</script>

<style scoped>

</style>
